<!--修改房间子组件-->
<template>
  <div>
    <el-dialog title="编辑界面" :visible.sync="showFlag" @close="closeDialog" width="50%">
      <el-form ref="editRoomForm" :model="editRoomForm" :rules="editRoomRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间编号" prop="rid">
              <el-input v-model="editRoomForm.rid" placeholder="请输入房间编号" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公寓编号" prop="aptId">
              <el-input v-model="editRoomForm.aptId" placeholder="请输入公寓编号" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间类型" prop="type">
              <el-select v-model="editRoomForm.type" placeholder="请选择房间类型">
                <el-option label="二人间" value="二人间"></el-option>
                <el-option label="四人间" value="四人间"></el-option>
                <el-option label="八人间" value="八人间"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间价格" prop="price">
              <el-input v-model="editRoomForm.price" placeholder="请输入房间价格"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间状态" prop="status">
              <el-select v-model="editRoomForm.status" placeholder="请选择房间使用状态">
                <el-option label="已废弃" value="已废弃"></el-option>
                <el-option label="可使用" value="可使用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialog-footer" align="center">
          <el-button type="success" @click="onSave('editRoomForm')">保 存</el-button>
          <el-button @click="onCancel('editRoomForm')">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "editRoom",
  data(){
    return{
      editRoomForm:{
        id:'',
        rid:'',
        aptId:'',
        type:'',
        price:'',
        useStatus:'',
        status:''
      },
      editRoomRules:{},
      showFlag:false,
    }
  },
  methods:{
    //初始化
    init(row){
      this.row=row
      this.getRoomDetail(row)
      this.showFlag=true
    },
    //获得本行数据
    getRoomDetail(row){
      console.log(row)
      this.editRoomForm=row
      if(this.editRoomForm.type==2){
        this.editRoomForm.type='二人间'
      }else if(this.editRoomForm.type==4){
        this.editRoomForm.type='四人间'
      }else if(this.editRoomForm.type==8){
        this.editRoomForm.type='八人间'
      }
      this.editRoomForm.status=row.useStatus==0?'已废弃':'可使用'
    },
    //关闭对话框的回调函数
    closeDialog(){
      this.$refs.editRoomForm.resetFields()
    },
    //保存
    onSave(){
      this.$refs.editRoomForm.validate(async valid=>{
        if(valid){
          if(this.editRoomForm.type === '二人间' || this.editRoomForm.type === '2'){
            this.editRoomForm.type = 2
          }else if(this.editRoomForm.type === '四人间' || this.editRoomForm.type === '4'){
            this.editRoomForm.type = 4
          }else{
            this.editRoomForm.type = 8
          }
          if(this.editRoomForm.status === '可使用' || this.editRoomForm.status === '1'){
            this.editRoomForm.status = 1
          }else{
            this.editRoomForm.status = 0
          }
          const {data:res}=await this.$http.post('/room/updateRoomById',this.editRoomForm)
          if(res.code !==200) return this.$message.error("修改房间信息失败")
          this.$message.success("修改房间信息成功")
        }
      })
      this.$emit("editClickBack")
      this.showFlag=false
    },
    //取消
    onCancel(){
      this.showFlag=false
      this.$refs.editRoomForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>